<template>
  <div class="backgroundWhite height100">
    <navs title="专家详情" fixed></navs>
    <van-row class="pt60 ph16" gutter="20">
      <van-col class="img_box">
        <img class="br4" src="@/assets/img/nothing.png" alt="" />
      </van-col>
      <van-col class="">
        <div class="ellipsis-1 ft32">{{ detail.name }}</div>
        <div class="ellipsis-1 ft28 mv8 color66">
          职称职务：{{ detail.job_title }}
        </div>
        <div class="ellipsis-1 ft26 mb8 color66">
          研究方向：{{ detail.research_direction }}
        </div>
        <div class="ellipsis-1 ft26 color66">所在单位：{{ detail.unit }}</div>
      </van-col>
    </van-row>

    <div class="backgroundWhite mt32 ph16 pt16 pb40 borderTop10">
      <div class="ft32 fb u-f u-f-ac">
        <div class="line mr8"></div>
        <label class="colorGrey">专家简介</label>
      </div>
      <div class="positionRe">
        <svg
          class="icon positionAb ft28"
          aria-hidden="true"
          style="top: -0.106rem; right: 0.333rem"
        >
          <use xlink:href="#icon-icon"></use>
        </svg>
        <div class="content ft28 color525 mt28">{{ detail.intro }}</div>
      </div>
    </div>
    <div class="p20 bottom_fixed">
      <van-button
        round
        block
        color="#2D65AC"
        @click="$toPage('/expertOrder/' + route.params.id)"
      >
        立即点单
      </van-button>
    </div>
  </div>
</template>

<script setup>
import { useRoute } from 'vue-router'
import { ref, reactive, getCurrentInstance, onBeforeMount } from 'vue'

const route = useRoute()
const instance = getCurrentInstance()
const _this = instance.appContext.config.globalProperties
let detail = ref({})
onBeforeMount(async () => {
  let res = await _this.$api.expert.getExpertInfo(route.params.id)
  detail.value = res.data
})
</script>

<style scoped lang="scss">
.img_box {
  width: 2.4rem;
  height: 3.066667rem;
  img {
    @include imgBox(100%, 100%);
  }
}
.content {
  padding: 0.266667rem 0.6rem;
  background: #f9fbfe;
  box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.06);
  border-radius: 8px;
}
.bottom_fixed {
  @include bottom_fixed;
}
</style>
